import React, { Component } from 'react';
import styles from '../airConditions/index.less';
import normal from '@/assets/normal.svg';
class Lighting extends Component {
  constructor(props) {
    super(props);
    this.state = {
      info: [],
      sign: false,
      elect: [],
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps?.data && nextProps.data.length > 0) {
      this.setState({
        info: nextProps.data,
        sign: nextProps.sign,
      });
    }
    if (nextProps?.electricMonitors && nextProps.electricMonitors.length > 0) {
      this.setState({
        elect: nextProps.electricMonitors,
        sign: nextProps.sign,
      });
    }
  }
  render() {
    const { info, sign, elect } = this.state;
    return (
      <div className={styles.airConditioner} style={{ marginTop: '.15rem' }}>
        <div className={styles.title}>
          <img src={normal} alt="" />
          {sign == true ? '漏电显示区' : '照明'}
        </div>
        <ul className={styles.list}>
          {sign === true
            ? elect &&
              elect.map((item, index) => {
                return (
                  <li key={index}>
                    <span>{item.name}</span>
                    <span
                      className={item.status == 1 ? styles.ele : styles._ele}
                    >
                      {item.status == 1
                        ? '正常'
                        : item.status == 2
                        ? '漏电'
                        : '-'}
                    </span>
                  </li>
                );
              })
            : info &&
              info.map((item, index) => {
                return (
                  <li key={index}>
                    <span>{item.name}</span>
                    <span className={styles.tem}>
                      {item.temperature === '' ? '-' : item.temperature}
                    </span>
                    <span
                      className={
                        item.working_status == 1 ? styles.sign : styles._sign
                      }
                    >
                      {item.working_status == 1
                        ? '已开启'
                        : item.working_status == 2
                        ? '已关闭'
                        : '-'}
                    </span>
                  </li>
                );
              })}
        </ul>
      </div>
    );
  }
}
export default Lighting;
